// mixins 的声明;
// 1. 无参数mixins;
@mixin vux-close {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #999;
  width: 24px;
  height: 24px;
  &:before,
  &:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 11px;
    width: 24px;
    height: 1px; // background-color: #eee;
    // currentColor: css变量 or css 关键字, currentColor代表了当前元素被应用上的color颜色值。 
    // 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。
    background-color: currentColor;
    transform: rotate(-45deg);
  }
  &:after {
    transform: rotate(45deg);
  }
}

// 2. 传参数的mixin --- 箭头icon;
// tips: 1.传参数形式：键值对, $name: value;  2. 默认参数值;
@mixin _setArrow($arrowsize, $borderColor, $borderWidth) {
  display: inline-block;
  height: $arrowsize;
  width: $arrowsize;
  border-width: $borderWidth $borderWidth 0 0;
  border-style: $borderColor;
  border-style: solid;
}

// 有判断条件的 mixin, 利用指令，@if, @else if, @else;
// tips: 有默认值的参数$direction 这里要放到函数参数的最后位置;
@mixin setArrow($arrowsize, $borderColor, $borderWidth, $direction: bottom) {
  @include _setArrow($arrowsize, $borderColor, $borderWidth); // @if, @else if, @else: 判断参数实现不同的输出;
  // tips: scss 中， == ，!== 分别对应着 等于，不等于;
  @if $direction==top {
    transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg)
  }
  @else if ($direction==right) {
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg);
    position: relative;
    top: -2px;
  }
  @else if ($direction==left) {
    transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg);
    position: relative;
    top: -2px;
  }
  @else if($direction==bottom) {
    transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg);
    position: relative;
    top: -3px;
  }
}

// 生成三角形 -- triangle;
@mixin triangle($direction, $size, $borderColor) {
  content: "";
  height: 0;
  width: 0;
  @if ($direction==top) {
    border-bottom: $size solid $borderColor;
    border-left: $size dashed transparent;
    border-right: $size dashed transparent;
  }
  @else if $direction==right {
    border-left: $size solid $borderColor;
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
  }
  @else if $direction==bottom {
    border-top: $size solid $borderColor;
    border-left: $size dashed transparent;
    border-right: $size dashed transparent;
  }
  @else if $direction==left {
    border-right: $size solid $borderColor;
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
  }
}

// 是否支持某个浏览器的前缀，如果你不想支持，可以设置为false
$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default;
// prefixer 
//---------------------------- 
@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix==webkit and $prefix-for-webkit==true {
      -webkit-#{$property}: $value;
    }
    @else if $prefix==moz and $prefix-for-mozilla==true {
      -moz-#{$property}: $value;
    }
    @else if $prefix==ms and $prefix-for-microsoft==true {
      -ms-#{$property}: $value;
    }
    @else if $prefix==o and $prefix-for-opera==true {
      -o-#{$property}: $value;
    }
    @else if $prefix==spec and $prefix-for-spec==true {
      #{$property}: $value;
    }
    @else {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

// 基于上面的拓展：
//webki和标准 
@mixin box-shadow($shadow...) {
  @include prefixer(box-shadow, $shadow, webkit spec);
}

//webkit moz 和标准 
@mixin box-sizing($type:border-box) {
  // border-box | padding-box | content-box 
  @include prefixer(box-sizing, $type, webkit moz spec);
}

//webkit moz o 和标准 
@mixin transform($property...) {
  @include prefixer(transform, $property, webkit moz o spec);
}


// 没有什么用，学习语法;
//设置宽高，默认为auto 
@mixin size($size...) {
  // 三元操作符， 相当于js中的 a > b ? a : b;
  $size: if(length($size) > 0, $size, auto);
  // nth($vars, index): 去变量第index 位置的值;
  // length($var)表示获取变量的长度，
  $width: nth($size, 1);
  $height: nth($size, length($size));
  @if $width !=auto {
    // unitless判断是否无单位，
    // if(unitless($width), $width + px, $width),  三元操作符;
    $width: if(unitless($width), $width + px, $width);
  }
  @if $height !=auto {
    $height: if(unitless($height), $height + px, $height);
  }
  width: $width;
  height: $height;
}

// sass的运算： 所有数据类型都支持 ==, !==;
// 1. 数字运算： SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)；
// 2. 颜色值运算: 颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值;
// 3. 字符串运算: + 可用于连接字符串
// 4. 布尔运算: SassScript 支持布尔型的 and or 以及 not 运算。
@mixin switchcolor($type) {
    // 布尔值运算：
    @if ($type == 1 or $type == 2) {
        color: red
    }
    @else if ($type == 3 or $type == 4) {
        color: blue;
    }
    @else {
        color: black;
    }
}

// sass数组运算：List Functions；数组运算; 
// tips: https://www.sass.hk/docs/  or  http://sass-lang.com/documentation/Sass/Script/Functions.html#list-functions;
// 1. index($list, $value), 判断数组list  是否有value值;
@mixin  typecolor($type) {
    @if (index(red blue yellow, $type)) {
        color: red;
        font-size: 18px;
    }
    @else {
        color: green;
        font-size: 14px;
    }
}
